<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6">
          <el-form-item label="商户名称">
            <el-select  v-model="params.agentId" filterable default-first-option placeholder="--区域--"
                        @change="changeAgentId()" style="width: 100%">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input style="width: 100%"  v-model="params.mobile" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户昵称">
            <el-input style="width: 100%" v-model="params.userName" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买次数">
            <el-select style="width: 100%" v-model="params.counts" clearable>
              <el-option value="0" label="0次"></el-option>
              <el-option value="1" label="1-5次"></el-option>
              <el-option value="2" label="5-20次"></el-option>
              <el-option value="3" label="20-50次"></el-option>
              <el-option value="4" label="50次以上"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="会员卡">
            <el-select style="width: 100%" v-model="params.memberId" clearable>
              <el-option v-for="item in selectCard" :key="'select'+ item.id"
                         :value="item.id" :label="item.name"></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地域">
            <el-input style="width: 100%"  v-model="params.area" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-form-item>
            <el-button type="primary"  size="mini" @click="handleSizeChange(10)">筛选</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap" >
      <el-table :data="tableData.list" stripe style="width: 100%" v-loading>
        <el-table-column prop="name" label="姓名" min-width="120" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120" align="center"></el-table-column>
        <el-table-column prop="nickname" label="用户昵称" min-width="120" align="center"></el-table-column>
        <el-table-column prop="tatalcount" label="购买次数" min-width="120" align="center"></el-table-column>
        <el-table-column prop="memberName" label="会员卡" min-width="120" align="center"></el-table-column>
        <el-table-column prop="cityname" label="地域" min-width="120" align="center"></el-table-column>
        <el-table-column  label="操作" width="80" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button class="el-text-check" type="text" @click="handleCheck(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
    </div>
    <div class="base-pagination clearfix">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="newPage"
                     :pageSize="pageSize"
                     :page-sizes="[5, 10, 15]"
                     background
                     layout="total,sizes, prev, pager, next, jumper"
                     :total="tableData.total">
      </el-pagination>
    </div>
    <el-dialog v-dialogDrag :visible.sync="dialogTableVisible" :show-close="false" width="300px">
      <template slot="title">
        <div class="back-title" @click="dialogTableVisible = false">
          <i class="el-icon-arrow-left"></i>
          <span>会员管理</span>
        </div>
      </template>
      <div class="t-body">
        <el-form :model="from" ref="ruleForm"  label-position="right"  label-width="86px" >
          <el-form-item label="会员等级：">
            <el-select style="width: 150px" v-model="from.memberId">
              <el-option v-for="item in selectCard" :key="'select'+ item.id"
                         :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态：">
            <el-switch v-model="from.isenable">
          </el-switch>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button class="btn-sure" :isloading="issubmitLoading" @click="submitForm('ruleForm')" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
        <router-link class="path flex-row-ver" :to="{path:'/main/user/message',query: {id: from.id}}">查看该会员订单</router-link>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          agentId: null,
          mobile: '',
          userName: '',
          counts:'',
          memberId: '',
          page: 0,
          size: 10,
          area:''
        },
        from: {
          memberId: '',
          isenable: true,
          id: '',
        },
        selectCard: [],
        dialogTableVisible: false,
        isloadingTable: false,
        issubmitLoading: false,
        newPage: 1,
        tableData: {},
        pageSize: 10 //分页数量
      };
    },
    computed: {
      restaurants() {
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val) {
          if (val.length) {
            this.params.agentId = val[0].id
          }
        },
        deep: true
      },
      'params.agentId': {
        handler(val) {
          this.getTableList()
        },
        deep: true
      }
    },
    methods: {
      handleSizeChange(size) {
        //设置分页数量
        this.params.size = size;
        this.pageSize = size;
        this.newPage = 1;
        this.params.page = 0;
        this.getTableList();
      },
      handleCurrentChange(page) {
        //切换分页
        this.params.page = page - 1;
        this.getTableList();
      },
      handleCheck(item) {
        this.dialogTableVisible = true
        this.from.id = item.id
        this.from.memberId = item.memberId ? item.memberId.toString() : ''
        this.from.isenable = item.isenable ? true : false
      },
      submitForm(formName) {//修改
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.from }
            this.issubmitLoading = true
            this.$http.post('/server/cuser/editMemberLevelorEnable', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '修改成功'})
                this.dialogTableVisible = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      getTableList() { // 获取会员数据
        const params = { ...this.params }
        if (params.counts == '0') {
          params.consumeCountMini = 0
          params.consumeCountLarge = 0
        }else if (params.counts == '1') {
          params.consumeCountMini = 0
          params.consumeCountLarge = 5
        }else if (params.counts == '2') {
          params.consumeCountMini = 5
          params.consumeCountLarge = 20
        }else if (params.counts == '3') {
          params.consumeCountMini = 20
          params.consumeCountLarge = 50
        }else if (params.counts == '4') {
          params.consumeCountMini = 50
          params.consumeCountLarge = ''
        }else {
          params.consumeCountMini = ''
          params.consumeCountLarge = ''
        }
        delete params.counts
        this.isloadingTable = true
        this.$http.get("/server/cuser/userMemberList?" + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      getCardList() { // 获取会员卡
        if (!this.params.agentId){
          return false
        }
        const params = {agentId: this.params.agentId, type: '', isEnable: '1'}
        this.isloadingTable = true
        this.$http.get("/server/member/list?" + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            let selectList = []
            if (res.data.data.data.length > 0){
              res.data.data.data.forEach((item, index) => {
                selectList.push({id: item.id.toString(), name: item.name})
              })
            }
            this.selectCard = selectList
            this.getTableList()
          }
        }).finally(() => { this.isloadingTable = false })
      },
      changeAgent() {
        this.params.size = 10;
        this.pageSize = 10;
        this.newPage = 1;
        this.params.page = 0;
        this.getCardList()
      }
    },
    mounted() {
      if (this.restaurants.length) this.params.agentId = this.restaurants[0].ID
    }
  };
</script>

<style lang="scss" scoped>
  .t-body{
    padding: 15px 5px;
    span{
      padding: 3px 15px;
      border-radius: 3px;
      overflow: hidden;
      color: #fff;
    }
    .zc{
      background: #00b034;
    }
    .dj{
      background: #a19d9e;
    }
  }
  .btn-sure{
    width: 80%;
    margin-left: 10%;
  }
  .path{
    text-align: center;
  }
</style>
